<template>
  <div class="info">
    <el-form ref="form" :model="form" label-width="80px" style="width: 460px;">
      <el-form-item label="头像">
        <!-- http://api.mountainfreshes.com/index.php/index/ajax/upload -->
        <!-- :on-success="handleAvatarSuccess" -->
        <el-upload
          class="avatar-uploader"
          action=""
          :show-file-list="false"
          
          :before-upload="uploadFile">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
          <img v-else :src="jiahao" alt=""  class="avatar">
        </el-upload>
      </el-form-item>
      <el-form-item label="昵称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="form.sex">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="手机号码">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item label="居住地址">
        <el-input v-model="form.address"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="upinfo()">立即保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import qs from "qs"
import store from '@/vuex/store'
import jiahao from '@/assets/image/jiahao.jpg';
export default {
  name: 'App',
  data(){
    return{
      comimgsrc:'http://api.mountainfreshes.com',
      form: {
        name: '13668342857',
        sex: '',
        phone: '13668342857',
        address: '',
        
      },
      imageUrl: '',
      headimg: '',
      jiahao
    }
  },
  methods:{
    uploadFile(file){
                 var formData=new FormData();
                 formData.append('file',file);
                 var file = formData;
            this.$http.post("/index.php/index/ajax/upload",file).then((res)=>{
                     console.log(res)
                     this.imageUrl = this.comimgsrc+res.data
                     this.headimg = res.data
                     // this.imageUrl = URL.createObjectURL(file.raw);
                 })
                return false;
            },
    onSubmit:function(){
      console.log(this.form)
    },
    handleAvatarSuccess(res, file) {
        console.log(res,file)
        this.imageUrl = URL.createObjectURL(file.raw);
        this.headimg = res
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      getinfo:function(){
        this.$http.post("/index.php/user/user/index",qs.stringify({
              // mobile:this.tel,
              // password:this.pwd
                  user_id: this.$store.state.userid
              }))
              .then(res => {
                console.log(res)
                this.form.name = res.data.row.username
                if(res.data.row.sex==0){
                  this.form.sex = '男'
                }else if(res.data.row.sex==1){
                  this.form.sex = '女'
                }else{
                  this.form.sex = ''
                }
                this.form.phone = res.data.row.mobile
                this.form.address = res.data.row.address
                this.image = res.data.row.headimg
                if(res.data.row.headimg == null){
                  this.imageUrl = this.image
                }else{
                  this.imageUrl = this.comimgsrc + this.image
                }
                this.headimg = res.data.row.headimg
                
              })
              .catch(error => {
                alert("网络错误")
              });
      },
      upinfo:function(){
        let aa = ''
        if(this.form.sex == '男'){
          aa = 0
        }else if(this.form.sex == '女'){
          aa = 1
        }else{
          aa = ''
        }
        this.$http.post("/index.php/user/user/userdata",qs.stringify({
              // mobile:this.tel,
              // password:this.pwd
                  user_id: this.$store.state.userid,
                  sex: aa,
                  username: this.form.name,
                  headimg: this.headimg,
                  address: this.form.address
              }))
              .then(res => {
                this.$message({
                  type: 'success',
                  message: '修改成功!',
                  customClass: 'com-message-tc'
                });
                
              })
              .catch(error => {
                alert("网络错误")
              });
      }
  },
  components:{
    
  },
  created(){
    this.getinfo();
  }
}
</script>



<style scoped lang="less">

.info{
  width: 100%;
  height: auto;
  zoom: 1;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid #6fc468;
  padding-top: 20px;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background: #d6d6d6 !important;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
